@import './variable.scss';
@import './van-reset.scss';
@import './common.scss';

#app{
    height:100%;
    .page-layout{
        height:100%;
    }
}

.page-main{
	.van-nav-bar__left{
		.van-icon{font-size:18px;color:$blue;}
	}
    .van-nav-bar__right{
		.van-icon{font-size:18px;}
	}
}

.page-home{
    // .van-nav-bar{z-index:2;background:#EF5C28;border:none;
    //     .van-nav-bar__title{color:#fff;}
    //     &::after{border:none;}
    // }
    padding-bottom:60px;
    .swipe{
        margin:0 15px;
        .van-swipe-item{
            height:150px;background:#000;border-radius:8px;overflow:hidden;
        }
    }
    .nav{
        &-title{
            margin:20px 15px;
            h3{font-size:16px;position:relative;padding-left:15px;
                &:after{
                    content:'';height:14px;width:4px;background:$blue;position:absolute;left:0;top:1px;border-radius:4px;
                }
            }
        }
        display:flex;margin:0 15px;
        .item{flex:1;padding:15px;border-radius:8px;background:#ddd;display:flex;justify-content:space-between;align-items:center;
            &-0{background:$light-blue;color:$blue;}
            &-1{background:$light-green;color:$green;}
            &+.item{margin-left:15px;}
            h3{font-size:16px;font-weight:normal;}
            p{padding-top:10px;font-size:12px;}
            
        }
    }
    .menu{
        margin:0 15px;
        .item{
            border-radius:8px;margin-top:15px;padding:0;overflow:hidden;
            .content{padding:12px 15px;margin-left:0;}
            .thumb{
                width:64px;height:64px;position:relative;
                .van-icon{
                    color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
                }
            }
            &-0{
                .thumb{
                    background:$blue;
                }
            }
            &-1{
                .thumb{
                    background:$green;
                }
            }
            &-2{
                .thumb{
                    background:$yellow;
                }
            }

        }
    }
    .login-out{
        position: absolute;bottom:0;width:100%;
    }
    
}

.page-patient{
    &-list{
        .hd{margin:0 15px;padding:15px 0;
            h3{font-size:16px;}
        }
        .van-cell-group{
            margin-bottom:15px;
            .clearfix{
                span{float:right;}
                .van-switch{float:right;}
            }
        }
    }
    &-add{
        height:100%;background:#fff;
        .card-type{
            .van-cell__title{flex:auto;width:40px;}
            .van-cell__value{flex:auto;text-align: left;}
            .van-button{margin-right:10px;border-radius:20px;}
        }
        .tips{
            padding:15px;margin:15px;background:$bg;color:$grey;border-radius:4px;line-height:21px;
        }
    }
}

.patient-card{
    box-shadow:rgb(242, 242, 242) 0px 0px 10px 0px;
    .value{
        text-align:center;display:inline-block;font-size:12px;
        .icon{display:inline-block;width:24px;height:24px;border-radius:50%;position:relative;background:$blue;transform:rotate(90deg);
            .van-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;}
        }

    }
}

.page-office{
    &-list{
        height:100%;
    }
    &-doctor{
        height: 100%;
        .tab-office{
            .van-tabs__nav--card{margin:0;border:none;background:#f7f7f7;
                .van-tab.van-tab--active{background:$blue;}
                .van-tab{border-right-color:$blue;}
            }
        }
        .tab-list{
            height:calc(100% - 30px);
            overflow: auto;
        }
        .van-tree-select__item{
            position: relative;
            &:after{
                content:'';position:absolute;bottom:0;left:15px;width:calc(100% - 30px);height:1px;background:#ebedf0;
            }
        }
    }
}

.page-doctor{
    &-index{
        .info{
            margin-bottom:15px;border-radius:8px;overflow:hidden;box-shadow:rgb(242, 242, 242) 0px 0px 10px 0px;background:#fff;
            .thumb{width:40px;height:40px;}
            .ft{margin:15px;position:relative;overflow:hidden;}
            .introduce,.hide-introduce{line-height:24px;}
            .hide-introduce{
                position:absolute;width:100%;top:-10000px;
            }
            .tag{margin-top:10px;
                .van-tag{margin-right:10px;}
            }
        }
        .hd{
            padding-bottom:15px; 
        }
    }
    &-list{
        .hd{padding:15px 0;}
        .list{
            .card-block{
                margin-bottom:15px;border-radius:8px;overflow:hidden;
                .thumb{width:40px;height:40px;}
                .ft{background:#fff;padding:10px 15px;
                    .van-tag{margin-left:10px;}
                }
            }
        }
        .fly-card{
            .desc{line-height:21px;}
        }
        .date-swipe{
            background:#fff;border-radius:8px;padding:15px;box-shadow:$shadow;
        }
        .date-list{
            background:#fff;text-align:center;display:flex;align-items:center;justify-content:space-between;
            .item{
                width:12%;
            }
            .day{margin-top:10px;}
            .van-button{
                border-radius:16px;
                &.active{
                    background:$light-blue;color:$blue;border-color:$light-blue;
                }
            }
        }
        .item-list{
            display:flex;align-items:center;
            .item{flex:1;
                &+.item{margin-left:5px;}
            }
            &.week{
                font-size:12px;color:$grey;
            }
            &.day{padding-top:10px;}
            .van-button{
                border-radius:16px;
                &.active{
                    background:$light-blue;color:$blue;border-color:$light-blue;
                }
            }
        }
    }
}

.page-appointment{
    &-index{
        .van-cell__title{width:80px;}
        .doctor{
            .icon{width:40px;margin-right:15px;}
            .name{
                b{font-size:16px;margin-right:5px;display:inline-block;}
            }
        }
        .tips{
            margin-bottom:30px;font-size:12px;color:$grey;
        }
        .status{
            text-align:center;padding:30px;
            .icon{
                &-0{color:$yellow;}
                &-1{color:$blue;}
                &-2{color:$green;}
                &-3{color:$red;}
            }
            .title{padding:15px;
                h3{font-size:16px;}
            }
        }
    }
    &-success{
        .info{
            text-align:center;padding:30px;
            // .van-icon{color:$blue;}
            .title{padding:15px;
                h3{font-size:16px;}
            }
            .desc{
                color:$grey;
            }
        }
    }
    &-list{
        height:100%;
        .condition{
            padding:15px;
        }
        .van-pull-refresh{
            height: calc(100% - 150px);
        }
        .van-list{
            margin:0 15px;height:100%;overflow:auto;
            .info{
                padding:15px;@extend .line-top;
                .li-label{width:80px;}
            }
        }
        .status{
            &-0{color:$yellow;}
            &-1{color:$blue;}
            &-2{color:$green;}
            &-3{color:$red;}
        }
    }
}

.doctor{
    &.van-cell{
        line-height: inherit;
        .van-cell__value{
            .name{position:absolute;left:0;top:50%;transform: translateY(-50%);}
        }
    }
}

.page-checkIn{
    &-index{
        height: 100%;background:#fff;
        
        .van-cell__title{
            width:80px;
        }
        .tips{
            color:$grey;font-size:12px;line-height:21px;padding:15px 0;
            dt{font-weight:bold;}
        }
        .code{
            padding:15px 0 50px 0;text-align:center;
            .content{
                position:relative;display:inline-block;width:160px;height:160px;border-radius:50%;text-align:center;background:$orange;color:#fff;
                .inner{
                    position:absolute;top:50%;left: 50%;transform:translate(-50%, -50%);display:inline-block;width:140px;
                    h3{font-size:36px;padding-top:10px;}
                }
            }
        }
    }
}

.page-report{
    &-index{
        height:100%;background:#fff;
        .tips{
            margin:15px;padding:10px 15px;border-radius:8px;background:$bg;color:$grey;line-height:21px;
        }
    }
    &-detail{  
        .patient{
            background:#fff;padding:15px 15px 5px 15px;border-radius:4px;box-shadow:$shadow;
            .van-col{margin-bottom:10px;}
        }
        .content{
            padding:15px;border-radius:4px;margin-top:15px;background:#fff;
            .hd{
                margin-bottom:15px;
            }
        }
    }
    &-list{
        .condition{padding:15px;}
        .van-list{margin:0 15px;}
        .fly-panel{
            .hd{
                .title{font-size:16px;font-weight:normal;}
            }
            .bd{padding-top:0;justify-content:space-between;
                p{color:$grey;
                    +p{padding-top:5px;}
                }
                .link{}
            }
        }
    }
}

.page-pay{
    &-list{
        background:none;
        .van-tabs__nav{
            background:none;
            .van-tab{
                flex:initial;margin-right:30px;
            }
            .van-tab--active{
                .van-tab__text{font-weight:bold;color:$blue;}
            }
            .van-tabs__line{background-color:$blue}
        }
        .fly-panel{
            .bd{padding-top:15px;}
        }
        .van-submit-bar__bar{
            justify-content: space-between;
            .van-button{height:100%;margin-right:-15px;border-radius:0;width:50%;}
        }
        .project-list{
            .van-cell{
                &+.van-cell{
                    padding-top:0;
                }
            }
        }
    }
    &-detail{
        .fly-panel{
            background: rgb(242, 242, 242);
            .flex-block{
                padding:15px 15px 0 15px;display: flex;justify-content: space-between;
            }
            .hd{
                padding-top:10px;font-size:12px;color:#999;
                &::after{
                    background:#ddd;
                }
            }
            .bd{
                justify-content: space-between;
            }
            .pay-status{
                &.status{
                    &-0{
                        color:$blue;
                    }
                    &-1{
                        color:$green;
                    }
                    &-2{
                        color:$grey;
                    }
                    &-3{
                        color:$red;
                    }
                    &-4{
                        color: $yellow
                    }
                }
            }
        }
        .van-submit-bar__bar{
            justify-content: space-between;
            .van-button{height:100%;margin-right:-15px;border-radius:0;width:50%;}
        }
    }
}

.page-message{
    &-list{
        .fly-card{
            .desc{
                line-height:21px;
            }
            .link{
                font-size:12px;color:$grey;text-align:right;
            }
        }
    }
}

.page-login{
    height:100%;text-align:center;background:#fff;
    .logo{
        // padding: 86px 0 72px 0;
        // p{color:$blue;padding-top:16px;}
    }
    .head{
        padding:90px 20px;background: url("../img/bg-login.png") no-repeat;background-size:100%;color:#fff;text-align:left;
        h5{
            font-size:16px;margin-bottom:10px;opacity: 0.7;font-weight: normal;
        }
        h3{
            font-size:21px;line-height:32px;
        }
    }
    .login-btn{
        margin:0 28px;
        &.m-t-30{margin-top:30px;}
        .van-button--primary{
            background: linear-gradient(73deg, #3DC83D 0%, #04C160 100%);
            .van-button__text{font-size:17px;}
        }
        p{color:#CCCCCC;font-size:17px;padding-top:23px;}
    }
    .van-submit-bar__bar{
        display:block;
        .van-submit-bar__button{display:none}
    }
    .van-checkbox__label{font-size:14px;}
    .agreement{display:inline-block;}
    .van-button--round{
        border-radius: 50px;
    }
    &-phone{
        text-align:left;
        .tip{
            padding: 15px 20px;color:#666;line-height:21px;
        }
        .login-form{
            padding:15px 10px;
        }
        .send-code{
            // background:$blue;
        }
        .agreement{
            padding:15px 10px;font-size:12px;
        }
        .login-btn{
            margin: 15px;
        }
    }

}

.page-login-account{
    h3{font-size:24px;color:#0A0A0A;padding:40px 15px;text-align:left;}
}

.page-login-bind{
    text-align: center;
    .bind{background:#fff;padding:40px 15px 24px 15px;margin-bottom:58px;color:#5B5B5B;
        img{margin-bottom:10px;}
        .van-icon{font-size:46px;color:#ddd;margin:9px 0;}
        .tips{padding-top:24px;text-align:left;line-height: 21px;}
    }
}


.page-user{
    &-index{
        .header{
            background:$blue;
            .van-cell{
                &-group{background:none;padding:20px 0;}
                background:none;color:#fff;
                .icon{width:48px;height:48px;overflow:hidden;border-radius:50%;background:#fff;margin-right:15px;}
                &__title{font-size:16px;}
                &__label{color:#fff;}
            }
        }
        .nav{
            margin:-40px 15px 15px 15px;border-radius:8px;overflow:hidden;
            .van-grid-item__content{
                padding:10px 15px;
            }
            &-title{
                margin:15px;
                h3{font-size:16px;}
            }
        }
    }
    
}

.page-user-info{
    .identity{
        p{text-align:center;padding:5px;background:#f8f8f8;}
    }
}

.page-user-perfect{
    .tips{
        padding:15px;
    }
    .submit-form{
        padding:15px;text-align:center;
        p{padding:15px;}
    }
}



.popup{
    &-appoint{
        .hd{padding:15px;text-align:center}
        
        .bd{margin:0 15px;}
        .van-row{
            text-align:center;padding:15px 0;
            .van-col{margin-bottom:10px;
                .van-tag{width:80%;text-align:center;display:inline-block;}
            }
        }
    }
    &-notice{
        .hd{
            h3{font-size:16px;}
        }
        
    }
}